<template>
	<view v-if="visitRecordList.length != 0">
		<view class="bookingRecord" v-for="item,index in visitRecordList">
			<view class="bookingRecord-lable company">{{item.visitComp}}</view>
			<view><text class="bookingRecord-lable">联系电话：</text><text v-if="item.visitPhone != null">{{item.visitPhone}}</text></view>
			<view><text class="bookingRecord-lable">开始时间：</text>{{item.visitTime}}</view>
			<view><text class="bookingRecord-lable">结束时间：</text>{{item.leftTime}}</view>
			<text class="bookingRecord-style unchecked" v-if="item.approverState=='0'">待审核</text>
			<text class="bookingRecord-style success" v-else-if="item.approverState=='1'">通过</text>
			<text class="bookingRecord-style unpass" v-else-if="item.approverState=='2'">拒绝</text>
		</view>
	</view>
	<view v-else-if="bookingRecordList.length != 0">
		<view class="bookingRecord" v-for="item,index in bookingRecordList">
			<view class="bookingRecord-lable company">{{item.broadroomName}}</view>
			<view><text class="bookingRecord-lable">联系电话：</text><text  v-if="item.phone != null">{{item.phone}}</text></view>
			<view><text class="bookingRecord-lable">开始时间：</text>{{item.bookStart}}</view>
			<view><text class="bookingRecord-lable">结束时间：</text>{{item.bookEnd}}</view>
			<text class="bookingRecord-style unchecked" v-if="item.approverState=='0'">待审核</text>
			<text class="bookingRecord-style success" v-else-if="item.approverState=='1'">通过</text>
			<text class="bookingRecord-style unpass" v-else-if="item.approverState=='2'">拒绝</text>
		</view>
	</view>
	<view v-else-if="warningRecordList.length != 0">
		<view class="bookingRecord" v-for="item,index in warningRecordList">
			<view class="bookingRecord-lable company">{{item.title}}</view>
			<view><text class="bookingRecord-lable">预警事件：</text>{{item.warningTime}}</view>
			<view><text class="bookingRecord-lable">事件类型：</text>{{item.type}}</view>
			<view><text class="bookingRecord-lable">事件描述：</text>{{item.desc}}</view>
			<text class="bookingRecord-style unchecked" v-if="item.level==1">一级</text>
			<text class="bookingRecord-style success" v-else-if="item.level==2">二级</text>
			<text class="bookingRecord-style unpass" v-else-if="item.level==3">三级</text>
		</view>
	</view>
	<view v-else class="bookingRecord-else">
		<image src="http://101.206.123.213:7051/static/image/common/暂无.png"></image>
		<text>暂无数据</text>
	</view>
</template>

<script>
	import {
		getVisitorRecord
	} from '@/common/js/api/visitRecord.js';
	import {
		getBook
	} from '@/common/js/api/bookRecord.js';

	export default {
		data() {
			return {
				//预约记录列表
				bookingRecordList: [],
				//访客登录列表
				visitRecordList: [],
				//当前用户登录信息
				userInfo: [],
				//预警信息列表
				warningRecordList: [],
			}
		},
		onLoad(option) {
			this.userInfo = uni.getStorageSync("userInfo")
			let name = option.name
			if (name != '' && name != null && name.indexOf('会议室预定记录') > -1) {
				uni.setNavigationBarTitle({
					title: '会议室预定记录'
				})
				//请求会议室预定记录接口
				this.getBookList()
			} else if (name != '' && name != null && name.indexOf('访客预约记录') > -1) {
				uni.setNavigationBarTitle({
					title: '访客预约记录'
				})
				//请求访客预约记录接口
				this.getVisitorList()
			} else if (name != '' && name != null && name.indexOf('预警信息') > -1) {
				uni.setNavigationBarTitle({
					title: '预警信息'
				})
				//请求预警信息接口
				// this.getVisitorList()
			}
		},
		methods: {
			getBookList() {
				let phone = this.userInfo.sysUser.phoneNumber
				console.log(this.userInfo.sysUser.phoneNumber);
				if(phone != '' && phone != undefined){
				getBook(phone).then(res => {
					this.bookingRecordList = res.data
				})}
			},
			getVisitorList() {
				let openId = this.userInfo.openid
				getVisitorRecord(openId).then(res => {
					this.visitRecordList = res.data
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.bookingRecord {
		height: 21vh;
		background-color: #fff;
		margin-bottom: 10px;
		color: #999;
		font-size: 12px;
		line-height: 30px;
		padding: 10px 20px 10px 20px;
		position: relative;

		.bookingRecord-style {
			position: absolute;
			right: 20px;
			bottom: 38%;
			font-size: 14px;
			font-weight: bold;
		}

		.unchecked {
			color: #1884eb;
		}

		.success {
			color: #00d8a0;
		}

		.unpass {
			color: red;
		}

		.bookingRecord-lable {
			color: black;
			font-weight: bold;
		}

		.company {
			font-size: 14px;
		}
	}

	.bookingRecord-else {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			margin-top: 50%;
			width: 112px;
			height: 100px;
		}

		text {
			font-family: PingFang SC;
			color: #999999;
			font-size: 16px;
		}
	}
</style>
